<template>
  <section class="component modify-mail-template">
    <el-form :model="messageModel" :rules="rules" ref="form" inline label-width="120px" class="text-left">
      <el-row>
        <el-col :span="24">
          <el-form-item label="设为默认模板:" prop="isDefault">
            <el-checkbox v-model="messageModel.isDefault" true-label="YES"	false-label="NO"></el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="模板编号:" prop="templateCode">
        <el-input :disabled="data" v-model="messageModel.templateCode" clearable></el-input>
      </el-form-item>
      <el-form-item label="模板名称:" prop="templateName">
        <el-input v-model="messageModel.templateName" clearable></el-input>
      </el-form-item>
      <el-form-item label="逾期阶段" prop="overduePeriod">
        <el-select v-model="messageModel.overduePeriod">
          <el-option v-for="{code,name,index} in $dict.getDictData('OverduePeriodStatus')" :key="index" :label="name" :value="code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="messageModel.templateStatus" clearable>
          <el-option v-for="{code,name,index} in $dict.getDictData('CommonState')" :key="index" :label="name" :value="code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模板参数说明">
        <span class="readme"> 客户姓名:${personal_name} 逾期天数:${overdue_days} 还款金额:${overdue_amount}</span>
      </el-form-item>
      <el-form-item label="邮件内容: " prop="templateContent">
        <el-input class="template-content" type="textarea" v-model="messageModel.templateContent" :autosize="{ minRows: 3}" :maxlength="500" show-word-limit></el-input>
      </el-form-item>
    </el-form>
    <div class="operate-buttons">
      <el-button @click="close">取消</el-button>
      <el-button @click="commit">确定</el-button>
    </div>
  </section>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { TemplateService } from "~/services/domain-service/template.service";
import { State, Action, Getter } from "vuex-class";
import { Emit, Prop, Watch } from "vue-property-decorator";
import { Form } from "element-ui";
import { CommonService } from "~/utils/common.service";
@Component({
  components: {}
})
export default class ModifyMailTemplate extends Vue {
  private messageModel: any = {};
  private rules: any = {};
  @Dependencies(TemplateService) private templateService: TemplateService;

  @Prop()
  private data: any;

  public refresh() {
    if (!this.data) {
      const templateForm = this.$refs["form"] as Form
      templateForm.resetFields()
    } else {
      this.messageModel.templateCode = this.data.templateCode
      this.messageModel.templateName = this.data.templateName
      this.messageModel.templateStatus = this.data.templateStatus
      this.messageModel.isDefault = this.data.isDefault
      this.messageModel.templateContent = this.data.templateContent
      this.messageModel.overduePeriod = this.data.overduePeriod
    }
  }

  @Emit("close")
  private close() {
    this.messageModel.id = ''
    const modifyForm = this.$refs["form"] as Form;
    modifyForm.resetFields();
  }

  @Emit("success")
  private emitSuccess() {
    this.$message.success("操作成功")
    this.close()
  }

  private created() {
    this.messageModel = {
      templateCode: "", // 模版编号
      templateName: "", // 模版名称
      templateStatus: "ENABLED", // 模版状态
      templateContent: "", // 模版内容
      templateCategory: "MAIL",
      overduePeriod: "",
      isDefault: "NO",
      id: ''
    };
    this.rules = {
      templateCode: { required: true, message: "请输入模板编号" },
      templateName: { required: true, message: "请输入模板名称" },
    };
  }

  @Watch('data', { immediate: true })
  private onDataChange() {
    if (!this.data) return;
    if (!this.data.id) return
    CommonService.revertData(this.messageModel, this.data)
  }


  /**
   * 提交新建模板按钮
   */
  private commit(type) {
    const templateForm = this.$refs["form"] as Form;
    templateForm.validate(validate => {
      if (!validate) return;
      this.templateService.createTemplate(this.messageModel).subscribe(this.emitSuccess);
    });
  }


}
</script>
<style lang="less" scoped>
.component.modify-mail-template {
  .readme {
    color: #ff3122;
  }

  .btns {
    text-align: center;
  }
  .template-content {
    width: 550px;
  }
}
</style>
